<template>
	<view class="content">
		<view class="indexad_2"><img src="~@/static/ad3.jpg"></view>
		<view class="activity_warp">
			<em>活动时间</em>
			<uni-countdown 
				color="#d7003d" 
				background-color="#ffffff"
				border-color="#ffffff"
				splitorColor="#ffffff"
				:day="1" 
				:hour="1" 
				:minute="12" 
				:second="40">
			</uni-countdown>
		</view>
		
		<view class="title_warp">
			<b>分类名称一</b>
			<span></span>
		</view>
		<view class="product-list">
			<goods-Case v-for="(item, index) in activityList[0].list" :key="index" v-bind:item="item"></goods-Case>
		</view>
		
		<view class="title_warp">
			<b>分类名称二</b>
			<span></span>
		</view>
		<view class="product-list">
			<goods-Case v-for="(item, index) in activityList[0].list" :key="index" v-bind:item="item"></goods-Case>
		</view>
		
		<view class="title_warp">
			<b>分类名称三</b>
			<span></span>
		</view>
		<view class="product-list">
			<goods-Case v-for="(item, index) in activityList[0].list" :key="index" v-bind:item="item"></goods-Case>
		</view>
		
		<!-- 返回顶部 -->
		<view :class="['gotop',scrollTop > 300 ? 'gotops' : '']" @click="onGotoTop"><img src="~@/static/img/icon/gotop.png"></view>
		
		<view class="bottom_warp_box">
			<view class="gohome" navTo="/pages/home/home"><i class="coolc icon-zhuye"></i><span>首页</span></view>
			<view class="kefu"><i class="coolc icon-tiexinshouhou"></i><span>客服</span></view>
			<view class="buyBtn" @click="popupOpen()">进入店铺</view>
		</view>
	</view>
</template>

<script>
import uniCountdown from "@/components/uni-countdown/uni-countdown"; //倒计时组件
import goodsCase from '@/components/goods-case';
export default {
	components: {
		uniCountdown,
		goodsCase
	},
    data() {
        return {
			scrollTop:0,
			activityList: [{}, {}]
        }
    },
    onLoad() {
        this.loadData();
        setTimeout(()=> {
            this.renderImage = true;
        }, 300);
    },
	onPageScroll(res){
		this.scrollTop = res.scrollTop;
	},
	methods:{
		onGotoTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
		},	
		async loadData() {
			let activityList = await this.$api.json('activityList');
			this.activityList = activityList;
		}
	}
}
</script>

<style lang='scss'>
	page { background:$bgcolor_white; padding-bottom:60upx; }
	.gotop { bottom:100upx !important; }
	.activity_warp {
		width:100%; background:#d7003d; padding:16upx 0; text-align:center;
		em { font-style:normal; color:$bgcolor_white; padding-right:15upx; }
	}
	.title_warp {
		width:100%; height:120upx; text-align:center; position:relative; border-bottom:1px solid #eeeeee;
		b { width:100%; height:100upx; line-height:100upx; font-size:$font-lg + 10upx; color:#000000; z-index:2; display:block; position:absolute; top:0px; left:0px; }
		span { width:180upx; height:30upx; margin:0 auto; background:#fff000; position:absolute; top:56upx; z-index:1; left:50%; margin-left:-90upx; }
	}
	.product-list { width:100%; height:auto; display:table; padding-bottom:60upx; }
	
	/* 底部浮动按钮 */
	.bottom_warp_box { 
		width:100%; height:96upx; background:$bgcolor_white; position:fixed; left:0px; right:0px; bottom:0px; z-index:99; text-align:center; box-shadow:0px -1px 5px #dedede;
		.gohome,.kefu { width:20%; display:block; float:left; }
		.gohome i,.kefu i { width:100%; height:60upx; line-height:66upx; overflow:hidden; display:block; font-size:36upx; }
		.gohome span,.kefu span { width:100%; height:36upx; line-height:20upx; font-size:$font-sm; display:block; }
		.gohome,.kefu { border-right:1px solid #eeeeee; }
		.buyBtn { width:60%; display:block; float:left; line-height:96upx; font-size:$font-base; background:#d7003d; color:$bgcolor_white; }
	}
</style>